<template>
  <v-container>
    <v-row>
      <v-col>
        <v-card>
          <v-card-text>
            这是一个测试代码用程序
          </v-card-text>
        </v-card>
      </v-col>
    </v-row>
    <v-row>
      <v-col>
        <v-card>
          <v-card-title>
            测试代码！
          </v-card-title>
          <v-card-text class="mt-2">
            <v-row>
              <v-col cols="12">
                <v-btn @click="onBtnClick">here</v-btn>
              </v-col>
            </v-row>
            <v-row>
              <v-col cols="12">
                <canvas ref="layout" width="1000" height="300"></canvas>
              </v-col>
            </v-row>
          </v-card-text>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";

@Component({})
export default class Page01 extends Vue {
  // region Prop
  // endregion
  // region Data
  position = {
    x: 0,
    y: 0
  };
  // endregion
  // region computed
  // endregion
  // region watch
  // endregion
  // region method
  onBtnClick() {
    this.position.x += 10;

    const ctx = this.$refs.layout.getContext("2d");
    ctx!.clearRect(0, 0, 1000, 300);
    ctx!.fillStyle = "#FF0000";
    ctx!.fillRect(this.position.x, this.position.y, 80, 100);
  }
  // endregion
  // region hook

  // endregion
  $refs!: {
    layout: HTMLCanvasElement;
  };
}
</script>

<style lang="scss"></style>
